<template>
  <div>
    <el-input
      v-model="value"
      style="max-width: 600px"
      :placeholder="placeholder"
      class="input-with-select"
    >
      <template #append>
        <el-button :icon="Search" @click="openLov" />
      </template>
    </el-input>

    <coupons-lov ref="couponsLovRef" @refreshDataList="couponsLovDataList"></coupons-lov>
  </div>
</template>

<script setup>
  import { computed, reactive, ref } from 'vue'
  import { Search } from '@element-plus/icons-vue'
  import CouponsLov from './coupons-lov.vue'

  const id = ref(0) // 用来得到最终的id值
  const value = ref('') // 用来得到要在input中显示的值
  const couponsLovRef = ref(null) // 优惠券LOV
  const emit = defineEmits(['setLovValue'])

  // 得到父组件向子组件传递的值
  const props = defineProps({
    placeholder: String,
    setValue: String
  }) 

  // 从父组件中得到input的值
  const model = defineModel()
  value.value = model.value

  // 打开lov弹框
  function openLov() {
    if(couponsLovRef.value) {
      couponsLovRef.value.init()
    }
  }
  // 优惠券子组件向伏组件传递的值
  function couponsLovDataList(data) {
    id.value = data.id
    value.value = data.couponName
    emit('setLovValue', { id: data.id, value: data.couponName })
  }
  
</script>

<style>
.input-with-select .el-input-group__prepend {
  background-color: var(--el-fill-color-blank);
}
</style>